<template>
  <div id="main">
    <a-form id="formLogin" class="user-layout-login"
            ref="formLogin"
            :form="form"
            @submit="handleSubmit"
    >
      <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px" :message="loginErrMsg" />
      <div class="sectionWrap">
        <div class="logo-box">
          <!-- <img src="@/assets/images/login_logo_3.png" alt /> -->
          <!-- <img src="@/assets/images/login_logo3.png" alt /> -->
        </div>
        <div class="logo-title">
          <span>AutoSC自动建模平台</span>
        </div>
        <a-form-item>
          <a-input
            class="inputBox"
            type="text"
            placeholder="用户名"
            @keyup.native.enter="$refs['password'].focus()"
            v-decorator="[
              'username',
              { rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'change' },
            ]"          >
            <a-icon slot="prefix" type="user" :style="{ color: 'black', fontSize: '20px' }" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-password
            class="inputBox"
            type="password"
            ref="password"
            autocomplete="false"
            placeholder="密码"
            v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
          >
            <a-icon slot="prefix" type="lock" :style="{ color: 'black', fontSize: '20px' }" />
          </a-input-password>
        </a-form-item>
        <a-form-item class="login-btn">
          <a-button
            size="large"
            type="primary"
            class="login-button"
            htmlType="submit"
            :loading="state.loginBtn"
            :disabled="state.loginBtn"
          >登录</a-button
          >
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script>
import { timeFix } from '@/utils/functions'
import { setToken } from '@/utils/TokenOpers'
import { mapActions, mapGetters } from 'vuex'
import { get } from '@/axios/api'

export default {
  components: {},
  data() {
    return {
      loading:false,
      isLoginError: false,
      loginErrMsg: '',
      form: this.$form.createForm(this),
      state: {
        loginBtn: false,
      },
    }
  },
  methods: {
    ...mapActions(['Login','GetUserInfo']),
    handleSubmit(e) {
      e.preventDefault()
      const {
        form: { validateFields },
        state,
      } = this
      const validateFieldsKey = ['username', 'password', 'validCode']
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          state.loginBtn = true
          const params = { ...values }
          this.Login(params)
              .then((res) => {//setToken
                state.loginBtn = false
                this.isLoginError = false
                this.GetUserInfo().then((res) => {
                  this.loginSuccessful()
                })
              })
              .catch((err) => (state.loginBtn = false))
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })
    },
    loginSuccessful() {//登录成功
      this.$router.push({ path: '/AutoSC' })
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`,
        })
      }, 1000)
    },
    focusNext(nextRef) {
      this.$refs[nextRef].focus()
    }
  },
}
</script>

<style lang="less" scoped>
#main{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #edf4f9;
}
.sectionWrap{
  .logo-title{
    text-align: center;
    font-size: 26px;
    font-family: MicrosoftYaHeiSemibold;
    font-weight: 600;
    color:#002366;
    letter-spacing: 1px;
    margin: 20px;
  }
  .inputBox {
    width: 380px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid transparent;
    /deep/.ant-input-prefix{
      transform: translate(-10px, -50%);
    }
    /deep/.ant-input{
      height: 100%;
    }
  }
  button.login-button {
  	margin-top: 15px;
    width: 380px;
    height: 43px;
    background: #3196fa;
    border-radius: 6px;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
// 	/deep/ .ant-form-explain{//*错误提示信息
// 		position: absolute;
// 	}
//   /deep/.ant-input-affix-wrapper .ant-input{
//     border: 1px solid transparent;
//     border-radius: 5px;
//   }
//   /deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
//     padding-left: 50px;
//     font-size: 17px;
//     font-family: PingFangSC-Regular, PingFang SC;
//     font-weight: 400;
//   }
//   .ant-form-item {
//     margin-top: 30px;
//     margin-bottom: 0px;
//   }
//   .forget {
//     position: absolute;
//     top: 360px;
//     right: 35px;
//   }
//   .sectionWrap {
//     width:100%;
//     border-radius: 16px;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     // .ewm {
//     //   position: absolute;
//     //   right: 14px;
//     //   top: 14px;
//     //   cursor: pointer;
//     // }
//     // .ewmTip {
//     //   width: 100%;
//     //   text-align: center;
//     //   font-size: 16px;
//     //   font-family: PingFangSC-Regular, PingFang SC;
//     //   font-weight: 400;
//     //   color: #333333;
//     // }
//   }
//   label {
//     font-size: 14px;
//   }
//   .getCaptcha {
//     display: block;
//     width: 100%;
//     height: 40px;
//   }
//   .forge-password {
//     font-size: 14px;
//   }
//   button.login-button {
// 		margin-top: 15px;
//     width: 380px;
//     height: 43px;
//     background: #3196fa;
//     border-radius: 6px;
//     font-size: 24px;
//     font-family: PingFangSC-Regular, PingFang SC;
//     font-weight: 400;
//     color: #ffffff;
//   }

//   .user-login-other {
//     text-align: left;
//     margin-top: 24px;
//     line-height: 22px;

//     .item-icon {
//       font-size: 24px;
//       color: rgba(0, 0, 0, 0.2);
//       margin-left: 16px;
//       vertical-align: middle;
//       cursor: pointer;
//       transition: color 0.3s;

//       &:hover {
//         color: #1890ff;
//       }
//     }

//     .register {
//       float: right;
//     }
//   }
// }
// .logo-box {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   img {
//     // width: 80%;
//     // height: 80px;
//     // margin-right: 10px;
// 		transform: translate(1px, 0px);
//   }
// }
// .logo-title{
//   text-align: center;
//   font-size: 26px;
//   font-family: MicrosoftYaHeiSemibold;
//   font-weight: 600;
//   /*color: rgba(0, 0, 0, 0.85);*/
//   color:#002366;
//   letter-spacing: 1px;
//   margin-top: 10px;
// }
</style>
